<template>
    <div style="width: 100%;height: 100%;margin:0 auto">

        <el-backtop :bottom="100">
            <div style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;}">UP
            </div>
        </el-backtop>
        <div>
            <!--<b-button v-b-modal.modal-1>Launch demo modal</b-button>-->
            <b-modal id="modal-1" title="登录" centered @ok="login()">
        <span style="float: right;font-size: x-small;color: blue;cursor:pointer"
              @click="switchLogin()">{{ switchLoginMethod }}</span>
                <b-form-group
                        id="input-group-1"
                        label="账号:"
                        label-for="input-1"
                        description="我们不会泄露您的任何信息.">
                    <b-form-input v-if="loginStatus"
                                  id="input-1" v-model="loginForm.userAccount" type="email" required
                                  placeholder="UserName"></b-form-input>

                    <b-input-group prepend="中国 +86" class="mb-2 mr-sm-2 mb-sm-0" v-else>
                        <b-input id="inline-form-input-username" v-model="loginForm.userAccount"
                                 placeholder="Phone"></b-input>
                    </b-input-group>
                </b-form-group>

                <b-form-group id="input-group-2" label="密码:" label-for="input-2">
                    <b-form-input
                            id="input-2"
                            v-model="loginForm.userPassword"
                            type="password"
                            required
                            placeholder="Password"></b-form-input>
                </b-form-group>

                <b-form-group id="input-group-3" label="其他登录方式:">
                    <b-nav>
                        <b-nav-item>
                            <img src="../../assets/img/微信.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                        <b-nav-item>
                            <img src="../../assets/img/微博.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                        <b-nav-item>
                            <img src="../../assets/img/GitHub.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                    </b-nav>
                </b-form-group>

            </b-modal>
        </div>
        <div>
            <b-modal id="modal-2" centered title="注册" @ok="registered()">
        <span style="float: right;font-size: x-small;color: blue;cursor:pointer"
              @click="switchRegistered()">{{ switchRegisteredMethod }}</span>
                <b-form-group
                        id="input-group-2-1"
                        label="账号:"
                        label-for="input-1">
                    <b-form-input v-if="registeredStatus"
                                  id="input-1" v-model="registeredForm.userAccount" type="email" required
                                  placeholder="Email"></b-form-input>

                    <b-input-group prepend="中国 +86" class="mb-2 mr-sm-2 mb-sm-0" v-else>
                        <b-input id="inline-form-input-username" v-model="registeredForm.userAccount"
                                 placeholder="Phone"></b-input>
                    </b-input-group>
                </b-form-group>


                <b-form-group id="input-group-2-2" label="验证码:" label-for="input-2">
                    <b-input-group style="cursor: pointer">
                        <b-form-input
                                id="input-2"
                                v-model="registeredForm.authCode"
                                type="text"
                                required
                                placeholder="VerificationCode"
                        >
                        </b-form-input>

                        <b-input-group-append>

                            <b-button variant="info" v-if="verificationStatus" @click="getCode()">获取验证码</b-button>

                            <div v-else>

                                <img :src="imgUrl" style="width: 150px;height: 38px" v-if="registeredStatus"
                                     @click="getCode()">

                                <b-button variant=" info" v-else>{{ countNum }} s后再次获取</b-button>

                            </div>

                        </b-input-group-append>

                    </b-input-group>
                </b-form-group>

                <b-form-group id="input-group-2-3" label="昵称:" label-for="input-3">
                    <b-form-input
                            id="input-3"
                            v-model="registeredForm.nickName"
                            type="text"
                            required
                            placeholder="NickName"></b-form-input>
                </b-form-group>


                <b-form-group id="input-group-2-4" label="密码:" label-for="input-4">
                    <b-form-input
                            id="input-4"
                            v-model="registeredForm.userPassword"
                            type="password"
                            required
                            placeholder="Password"></b-form-input>
                </b-form-group>

                <b-form-group id="input-group-2-5" label="其他注册方式:">
                    <b-nav>
                        <b-nav-item>
                            <img src="../../assets/img/微信.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                        <b-nav-item>
                            <img src="../../assets/img/微博.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                        <b-nav-item>
                            <img src="../../assets/img/GitHub.jpg" style="width: 50px;height: 40px">
                        </b-nav-item>
                    </b-nav>
                </b-form-group>

            </b-modal>
        </div>

        <div style="width:100%">
            <b-navbar class="user_navbar_main" toggleable="lg" type="dark" variant="info">

                <div class="user_section">
                    <div>
                        <b-navbar-brand href="#">IT帮</b-navbar-brand>
                    </div>

                    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

                    <b-collapse id="nav-collapse" is-nav>
                        <div>
                            <b-navbar-nav>
                                <b-nav-item>首页</b-nav-item>
                                <b-nav-item @click="$router.push('/userLoginMain/programmer')">程序员</b-nav-item>
                                <b-nav-item class="postTask_item" @click="$router.push('/userLoginMain/postTask')">任务
                                </b-nav-item>
                            </b-navbar-nav>
                        </div>

                        <div>
                            <b-nav-form style="margin: auto;">
                                <el-autocomplete
                                        style="width: 280px"
                                        class="inline-input"
                                        v-model="selectState"
                                        @input="loadAll"
                                        :fetch-suggestions="querySearch"
                                        placeholder="请输入职业"
                                        @select="handleSelect"
                                        :highlight-first-item="true">
                                    <el-button slot="append" icon="el-icon-search" @click="selectObjInfo"></el-button>
                                </el-autocomplete>
                            </b-nav-form>
                        </div>


                        <!-- Right aligned nav items -->
                        <b-navbar-nav class="ml-auto" v-if="this.$store.state.userStatus">
                            <div class="user_navbar_wrap">
                                <b-navbar-brand class="user_navbar_box user_navbar_item" href="#">
                                    <b-button variant="info" v-b-modal.modal-1>登录</b-button>
                                </b-navbar-brand>

                                <b-navbar-brand class="user_navbar_box" href="#">
                                    <span>/</span>
                                </b-navbar-brand>

                                <b-navbar-brand class="user_navbar_box" href="#">
                                    <b-button variant="info" v-b-modal.modal-2>注册</b-button>
                                </b-navbar-brand>
                            </div>
                        </b-navbar-nav>
                        <b-navbar-nav class="ml-auto" v-else>

                            <div class="user_work_main">
                                <b-nav-item-dropdown text="工作台" right style="padding-right: 10px">
                                    <b-list-group>
                                        <b-dropdown-item @click="goMyWork()">
                                            <i class="el-icon-refresh-left"/> 待审核
                                        </b-dropdown-item>
                                        <b-dropdown-item @click="goMyWork()">
                                            <i class="el-icon-suitcase"/> 我的任务
                                        </b-dropdown-item>
                                        <b-dropdown-item @click="goMyWork()">
                                            <i class="el-icon-s-custom"/> 我的雇佣
                                        </b-dropdown-item>
                                    </b-list-group>
                                </b-nav-item-dropdown>
                            </div>

                            <el-badge is-dot class="item"/>
                            <div>
                                <b-nav-item-dropdown text="消息" right style="padding-right: 30px">
                                    <b-list-group>
                                        <b-dropdown-item href="#">系统消息
                                            <el-badge :value="12" type="success"/>
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#">工作通知
                                            <el-badge :value="5"/>
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#">交易消息
                                            <el-badge :value="2"/>
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#"> 评论回复
                                            <el-badge :value="8" type="primary"/>
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#">赞及其他
                                            <el-badge :value="0" type="warning"/>
                                        </b-dropdown-item>
                                    </b-list-group>
                                </b-nav-item-dropdown>
                            </div>

                            <el-avatar :size="50" :src="this.$store.state.userImg" style="float: left"></el-avatar>

                            <div>
                                <b-nav-item-dropdown :text="this.$store.state.userName" righ style="padding-left: 20px">
                                    <b-list-group>
                                        <b-dropdown-item @click="$router.push('/userLoginMain/personCenter/pCInfo')"><i
                                                class="el-icon-user-solid"/> 个人中心
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#"><i class="el-icon-star-on"/> 我的收藏</b-dropdown-item>
                                        <b-dropdown-item href="#" @click="credit()"><i class="el-icon-trophy"/> 技术信用
                                        </b-dropdown-item>
                                        <b-dropdown-item href="#" @click="logout()">
                                            <i class="el-icon-switch-button"/> 退出
                                        </b-dropdown-item>
                                    </b-list-group>
                                </b-nav-item-dropdown>
                            </div>

                        </b-navbar-nav>

                    </b-collapse>
                </div>
            </b-navbar>
        </div>

        <div style="width:100%;">

            <b-carousel
                    id="carousel-1"
                    v-model="slide"
                    :interval="2500"
                    controls
                    fade
                    indicators
                    img-width="1024px"
                    img-height="480px"
                    style="text-shadow: 1px 1px 2px #333;"
                    @sliding-start="onSlideStart"
                    @sliding-end="onSlideEnd">
                <!-- Text slides with image -->
                <b-carousel-slide
                        caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=52">
                </b-carousel-slide>

                <b-carousel-slide
                        caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=54">
                </b-carousel-slide>

                <b-carousel-slide
                        caption="First slide"
                        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
                        img-src="https://picsum.photos/1024/480/?image=58">
                </b-carousel-slide>


            </b-carousel>
        </div>

        <div style="width:100%;height:500px;padding: 10px">
            <b-jumbotron style="padding: 100px">
                <template v-slot:header>欢迎来到IT帮</template>
                <template v-slot:lead>210000+名企工程师、设计师、产品经理已经在IT协帮助企业完成开发任务
                </template>
                <hr class="my-4">
                <p> 按需雇佣互联网坐班兼职工程师 </p>
                <b-button style="width: 250px" variant="primary" href="/userLoginMain/programmer">即刻浏览人才</b-button>
            </b-jumbotron>
        </div>

        <div style="width: 80%;margin: auto">
            <b-card border-variant="light">
                <div>
                    <h1 style="text-align: center">产品优势</h1>
                    <hr>
                    <div class="article_main">
                        <b-card
                                title="雇主端..."
                                img-src="https://picsum.photos/600/300/?image=25"
                                img-alt="Image"
                                img-top
                                tag="article"
                                style="max-width: 35rem;float: left;margin-left: 10%;height: 800px"
                                class="mb-2">
                            <b-card-text>
                                <hr>
                                <ul>
                                    <p><i class="el-icon-s-claim"/>质量保障</p>
                                    <li>注册IT帮的兼职程序员来自BAT等知名互联网企业，拥有多年工作经验和垂直行业业务经验，保证工作质量和效率。</li>
                                    <p><i class="el-icon-s-claim"/>杜绝延期</p>
                                    <li>IT帮要求程序员每天提交工作记录和工作进度，并把延期纳入程序员兼职的信用体系中，对项目延期扣除信用分和延期误工费，从根本上杜绝延期。</li>
                                    <p><i class="el-icon-s-claim"/>专人对接</p>
                                    <li>IT帮拥有一支迅速应答雇主需求的运营团队，当天提出需求，当天程序员即可到你的团队兼职工作。</li>
                                    <p><i class="el-icon-s-claim"/>售后服务</p>
                                    <li>项目完成后，IT帮要求兼职程序员提供源码交付，并根据项目需求提供不收任何费用的质保期维护。</li>
                                </ul>
                            </b-card-text>
                        </b-card>
                        <b-card
                                title="工程师端..."
                                img-src="https://picsum.photos/600/300/?image=25"
                                img-alt="Image"
                                img-top
                                tag="article"
                                style="max-width: 35rem;float: right;margin-right: 10%;height: 800px"
                                class="mb-2">
                            <b-card-text>
                                <hr>
                                <ul>
                                    <p><i class="el-icon-s-claim"/>严格筛选</p>
                                    <li>IT帮运营团队筛选出拥有支付能力、项目需求合理的聘用方推荐给兼职工程师。</li>
                                    <p><i class="el-icon-s-claim"/>支付担保</p>
                                    <li>雇主在跟兼职程序员确认好需求和合作方式后，都需要先将费用支付到平台进行担保，先支付后工作，保障兼职工程师的合法权益。</li>
                                    <p><i class="el-icon-s-claim"/>协助对接</p>
                                    <li>工程师在兼职中需要花费大量时间与聘用方商议需求，IT帮专业的运营人员将协助对接双方需求，把沟通成本降到最低。</li>
                                    <p><i class="el-icon-s-claim"/>信息保密</p>
                                    <li>在需求沟通过程中、雇主方付款前，兼职程序员的联系方式一律保密。程序员只会收到经过筛选并与自己匹配的雇主方需求。</li>
                                </ul>
                            </b-card-text>
                        </b-card>
                    </div>
                </div>
            </b-card>
        </div>

        <div style="width: 80%;margin: auto">
            <b-card border-variant="light" class="text-center">
                <h1>我们的成就</h1>
                <hr>
                <div style="width: 600px;height: 600px;margin:auto" ref="userLoginChart"></div>
            </b-card>
        </div>

        <div style="width: 80%;margin: auto">
            <b-card border-variant="light" class="text-center">
                <h1>最新精选评价</h1>
                <hr>
                <div class="block">
                    <el-carousel :interval="2000" type="card" height="400px">

                        <el-carousel-item v-for="item in programmers" :key="item.userId"
                                          style="background-color: #18a4bc;padding-top: 20px">
                            <el-avatar :src="item.imageUrl" :size="100"></el-avatar>
                            <p>{{ item.nickName }}</p>
                            <el-rate
                                    :value="item.starRating"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                            </el-rate>
                            <p style="padding-top: 10px">{{ item.programmerCompany }}{{ item.programmerCareer }}</p>
                            <p style="padding-top: 50px">{{ item.evaluatedDesc }}</p>
                            <el-button type="primary" round @click="getInfoMain(item.userId)">查看详情</el-button>
                        </el-carousel-item>

                    </el-carousel>
                </div>
            </b-card>
        </div>

        <div style="width: 100%;">
            <b-card
                    overlay
                    img-src="https://picsum.photos/900/250/?image=3"
                    img-alt="Card Image"
                    img-height="480"
                    text-variant="white"
                    title=""
                    sub-title="">
                <b-card-text>
                </b-card-text>
                <div style="width: 600px;height: 50px;margin: 0 auto;padding-top: 200px">
                    <b-button pill variant="primary" style="float: left;width: 250px;height: 50px"
                              @click="$router.push('/task')">
                        免费发布需求
                    </b-button>
                    <b-button pill variant="success" style="float: right;width: 250px;height: 50px">申请签约接单</b-button>
                </div>
            </b-card>
        </div>

        <bottom></bottom>

    </div>
</template>

<script>
    const echarts = require('echarts')
    import bottom from "@/components/other/bottom"
    import Vue from 'vue'
    import {isEmailAvailable, isPhoneAvailable} from '../../util/validate'

    export default {
        name: "userLogin",
        data() {
            return {
                programmers: [],
                loginStatus: true,
                switchLoginMethod: '手机号登录',
                //登录表单
                loginForm: {
                    userAccount: "wy2668461654@163.com",
                    userPassword: "123"
                },

                registeredStatus: true,
                switchRegisteredMethod: '手机号注册',
                verificationStatus: true,
                //注册表单
                registeredForm: {
                    authCode: '',
                    nickName: '',
                    userAccount: '',
                    userPassword: ''
                },
                imgUrl: '',
                countNum: 60,

                //滚动图
                slide: 0,
                sliding: null,

                //echarts
                option: '',

                restaurants: [],
                selectState: '',
                selectObj: {id: ''}
            }
        },
        methods: {
            getInfoMain(data) {
                this.$router.push({
                    path: "/userLoginMain/userInfoMain",
                    query: {userId: data}
                })
            },

            goMyWork() {
                this.$router.push('/userLoginMain/personCenter/pCMyWork')
            },

            credit() {
                this.$router.push({
                    path: '/technologyCredit',
                    query: {userId: this.$store.state.userId}
                })
            },

            //切换登录方式
            switchLogin() {
                if (this.loginStatus) {
                    this.loginStatus = false
                    this.switchLoginMethod = "邮箱登录"
                } else {
                    this.loginStatus = true
                    this.switchLoginMethod = "手机号登录"
                }
            },
            async login() {
                for (const item in this.loginForm) {
                    if (this.loginForm[item] === '') {
                        Vue.prototype.$notify.error({
                            title: "错误",
                            message: "输入为空"
                        })
                        return
                    }
                }
                const {data: res} = await this.$http.post('/sys/userLogin', this.loginForm)
                if (res.code === 200) {
                    Vue.prototype.$notify.success({
                        title: '成功',
                        message: '登录成功，欢迎来到IT帮'
                    })
                    this.$store.state.userId = res.content.user.userId
                    this.$store.state.userName = res.content.user.nickName
                    this.$store.state.userImg = res.content.userImage.imageUrl
                    this.$store.state.userStatus = false
                } else {
                    Vue.prototype.$notify.error({
                        title: '失败',
                        message: '登录失败，账号或密码错误'
                    })
                }
            },
            async getCode() {
                if (this.registeredForm.userAccount !== '' && (isEmailAvailable(this.registeredForm.userAccount) || isPhoneAvailable(this.registeredForm.userAccount))) {
                    if (this.registeredStatus) {
                        const {data: res} = await this.$http.get('/sys/kaptcha')
                        this.imgUrl = 'data:image/png;base64,' + res
                        this.verificationStatus = false
                    } else {
                        const {data: res} = await this.$http.get('/sys/note/' + this.registeredForm.userAccount)
                        if (res.code === 200) {
                            this.verificationStatus = false
                            this.countDown()
                        }
                    }
                } else {
                    Vue.prototype.$notify.error({
                        title: '失败',
                        message: '账号不合法'
                    })
                    this.verificationStatus = true
                }

            },
            countDown() {
                if (this.countNum ===60) {
                    setInterval(() => {
                        if (this.countNum > 0) {
                            this.countNum--
                        } else {
                            clearImmediate(this)
                            this.countNum = 60
                            this.verificationStatus = true
                        }
                    }, 1000)

                }
            },
            async registered() {
                let flag = true
                for (const item in this.registeredForm) {
                    if (this.registeredForm[item] === '') flag = false
                }
                if (flag) {
                    if (this.registeredStatus) {
                        if (this.registeredForm.userAccount.indexOf("@") === -1 || this.registeredForm.userAccount.indexOf(".com") === -1) {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: '邮箱格式错误'
                            })
                        } else {
                            const {data: res} = await this.$http.post('/sys/email_register', this.registeredForm)
                            if (res.code === 200) {
                                Vue.prototype.$notify.success({
                                    title: '成功',
                                    message: '注册成功'
                                })
                            }
                            this.registeredSuccess()
                        }
                    } else {
                        const {data: res} = await this.$http.post('/sys/phone_register', this.registeredForm)
                        if (res.code === 200) {
                            Vue.prototype.$notify.success({
                                title: '成功',
                                message: '注册成功'
                            })
                        }
                        this.registeredSuccess()
                    }
                    this.verificationStatus = true
                } else {
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: '输入不能为空'
                    })
                }
            },
            registeredSuccess() {
                this.loginForm.userAccount = this.registeredForm.userAccount
                this.loginForm.userPassword = this.registeredForm.userPassword
                this.registeredForm.authCode = ''
                this.registeredForm.nickName = ''
                this.registeredForm.userAccount = ''
                this.registeredForm.userPassword = ''
            },

            switchRegistered() {
                if (this.registeredStatus) {
                    this.registeredStatus = false
                    this.switchRegisteredMethod = "邮箱注册"
                } else {
                    this.registeredStatus = true
                    this.switchRegisteredMethod = "手机号注册"
                }
            },

            logout() {
                this.$store.state.userId = ''
                this.$store.state.userName = ''
                this.$store.state.userStatus = true
                window.sessionStorage.removeItem('token')
                Vue.prototype.$notify.success({
                    title: '成功',
                    message: '您已成功退出'
                })

            },
            //滚动图
            onSlideStart() {
                this.sliding = true
            },
            onSlideEnd() {
                this.sliding = false
            },
            //charts
            async Draw() {
                const {data: res} = await this.$http.get('/homePage/pieChaprt')
                let myChart = echarts.init(this.$refs.userLoginChart)

                this.option = {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: 'IT帮成就',
                            type: 'pie',
                            radius: '70%',
                            data: [
                                {value: res.content.taskNum, name: '发布任务'},
                                {value: res.content.programmerNum, name: '在线程序员'},
                                {value: res.content.ordNum, name: '完成订单'},

                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(this.option);
            },
            //最新精选评价
            async getPogrammers() {
                const {data: res} = await this.$http.get('/programmer/programmers')
                this.programmers = res.content

            },


            querySearch(queryString, cb) {
                const restaurants = this.restaurants;
                const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            async loadAll() {
                this.restaurants = []
                if (this.selectState !== '' && this.selectState !== null) {
                    const {data: res} = await this.$http.get('/programmer/search/' + this.selectState + '/1/10')
                    this.restaurants = res.content
                    for (let i = 0; i < this.restaurants.length; i++) {
                        Vue.set(this.restaurants[i], "value", this.restaurants[i].user_career + this.restaurants[i].user_company + this.restaurants[i].nick_name)
                    }

                }
            },
            handleSelect(item) {
                this.selectObj = item
            },

            selectObjInfo() {
                if (this.selectObj.id !== '') {
                    this.$router.push({
                        path: '/userLoginMain/userInfoMain',
                        query: {userId: this.selectObj.user_id}
                    })
                } else {
                    Vue.prototype.$notify.warning({
                        title: '警告',
                        message: '未选中用户'
                    })

                }
            }


        },
        mounted() {
            this.Draw()
            this.getPogrammers()
        },
        components: {
            bottom
        }
    }
</script>

<style scoped>
    .user_section {
        display: flex;
        align-items: center
    }

    .user_navbar_main {
        justify-content: center;
    }

    .user_navbar_box {
        margin-right: 0;
    }

    .user_navbar_wrap {
        display: flex;
        align-items: center;
    }

    .user_navbar_box.user_navbar_item {
        margin-left: 8px;
    }

    .postTask_item {
        margin-right: 8px;
    }

    .user_work_main {
        margin-left: 8px;
    }

    .mb-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mb-2 img {
        height: 279px !important;
    }

    .mb-2 + .mb-2 {
        margin-left: 10px !important;
    }

    .article_main {
        display: flex;
        justify-content: center;
    }
</style>